<template>
    <div class="mask">
        <a-form :model="formState" v-bind="layout" name="nest-messages" :validate-messages="validateMessages"
            @finish="onFinish">
            <div>
                <a-form-item name="cnum" label="设备编号">
                    <a-input v-model:value="formState.cnum" />
                </a-form-item>

                <a-form-item name="equipname" label="设备名称" :rules="[{ required: true }]">
                    <a-input v-model:value="formState.equipname" />
                </a-form-item>
            </div>


            <div>
                <a-form-item name="equiptype" label="设备类型" :rules="[{ required: true, message: 'Missing area' }]">
                    <el-select v-model="formState.equiptype" class="m-2" size="default" placeholder="--请选择--">
                        <el-option v-for="item in areas" :key="item.valuex" :label="item.label" :value="item.valuex" />
                    </el-select>
                </a-form-item>

                <a-form-item name="district" label="绑定分区" :rules="[{ required: true, message: 'Missing area' }]">
                    <el-select v-model="formState.district" class="m-2" size="default" placeholder="--请选择--">
                        <el-option v-for="item in proper" :key="item.valuey" :label="item.label" :value="item.valuey" />
                    </el-select>
                </a-form-item>
            </div>

            <div>
                <a-form-item name="ip" label="IP地址">
                    <a-input v-model:value="formState.ip" />
                </a-form-item>
                <!-- 
                <a-form-item name="factory" label="设备厂商" :rules="[{ required: true }]">
                    <button>编辑</button>
                    <button>删除</button>
                    <button>禁用</button>
                </a-form-item> -->
            </div>

            <hr />
            <el-button @click="update">保存</el-button>
            <el-button @click="hide">取消</el-button>
        </a-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { UploadOutlined, InboxOutlined } from '@ant-design/icons-vue';
import service from "../../utils/service"


const layout = {
    labelCol: { span: 0 },
    wrapperCol: { span: 0 },
};

const validateMessages = {
    required: '${label} is required!',
    types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
    },
    number: {
        range: '${label} must be between ${min} and ${max}',
    },
};

interface mydata {
    "id": number,
    "cnum": string,
    "equipname": string,
    "equiptype": string,
    "district": string,
    "ip": string,
    "factory": string,
    "state": number,
    "operate": string[]
}
const formState = reactive<mydata>({
    "id": 4,
    "cnum": '',
    "equipname": '',
    "equiptype": '门禁',
    "district": '北门',
    "ip": '',
    "factory": '',
    "state": 0,
    "operate": [
        "编辑",
        "删除",
        "禁用"
    ]
});

const onFinish = (values: any) => {
    console.log('Success:', values);
};
const areas = [
    {
        valuex: "--请选择设备类型--",
        label: "--请选择设备类型--",
    },
    {
        valuex: "门禁设备",
        label: "门禁设备",
    },
    {
        valuex: "控制设备",
        label: "控制设备",
    }
];
const proper = [
    {
        valuey: "--请选择所在分区--",
        label: "--请选择所在分区--"
    },
    {
        valuey: "北门通道1",
        label: "北门通道1"
    },
    {
        valuey: "北门通道2",
        label: "北门通道2"
    },
    {
        valuey: "北门通道4",
        label: "北门通道4"
    },
    {
        valuey: "北门",
        label: "北门"
    },
]


const emit = defineEmits<{
    (e: "hide"): void;
    (e: "upmydate"): void;
}>();
const hide = () => {
    emit("hide");
};

const update = () => {
    formState.id++
    service({
        url: "equipment",
        method: "post",
        data: formState
    }).then(() => {
        emit("hide");
        emit("upmydate")
    })
}
</script>

<style scoped>
.mask {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: gray;
    opacity: 0.9;
    z-index: 999;
}

.ant-form {
    width: 800px;
    height: 300px;
    margin: auto;
    background-color: whitesmoke;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    overflow: auto;
}

.ant-form div {
    margin-bottom: 10px;
}
</style>